<template>
	<div class="finance-container">
		<div class="dataScreen" ref="dataScreenRef">
			<ScreenHeader
				:titleImg="postTitleImg"
				:menuItemsArr="postMenuArr"
				@clickPath="clickMenu"
			></ScreenHeader>
			<div class="property-main">
				<!-- 左边 -->
				<div class="dataScreen-lf">
					<div class="lf-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['资金预算']">
						</ItemTitle>
						<div class="lf-top-cn">
							<div class="line one">
								<div v-for="item in leftArr1">
									<div class="left-icon">
										<img
											src="@/assets/screenImg/propertyImg/left/pic1.png"
											alt=""
										/>
									</div>
									<div class="right-desc">
										<div class="text">
											<img :src="item.name" alt="" />
										</div>
										<div class="text">
											<span class="numColor">
												{{ changeNumToWan(item.value) }}
											</span>
											<span class="m-l5"><img :src="item.unit" alt="" /></span>
										</div>
									</div>
								</div>
							</div>
							<div class="line two">
								<div>
									<span class="textColor">当季计划流入统计：</span>
									<span class="numColor2">
										{{ changeNumToWan(leftArr1[1].influx || 0) }}
									</span>
									<span class="textColor">万元</span>
								</div>
								<div>
									<span class="textColor">当季计划流出统计：</span>
									<span class="numColor2">
										{{ changeNumToWan(leftArr1[1].outflow || 0) }}
									</span>
									<span class="textColor">万元</span>
								</div>
							</div>
							<div class="line three m-t30 p-b50">
								<div v-for="item in leftArr2">
									<div class="left-icon">
										<img
											src="@/assets/screenImg/financeImg/left/pic.png"
											alt=""
										/>
									</div>
									<div class="right-desc">
										<div class="text">
											<img :src="item.name" alt="" />
										</div>
										<div class="text">
											<span class="numColor">{{
												changeNumToWan(item.value || 0)
											}}</span>
											<span class="m-l5"><img :src="item.unit" alt="" /></span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="lf-bottom">
						<div>
							<img src="@/assets/screenImg/financeImg/left/title5.png" alt="" />
						</div>
						<div class="select-box">
							<div>
								<SelectTool
									:optionsArr="selectArr"
									:getWidth="'100'"
									:modelValue="yearCountChat.direction"
									@update:modelValue="(m) => yearCount(m, 'direction')"
								></SelectTool>
							</div>
							<div>
								<SelectTool
									:optionsArr="departmentArr"
									:getWidth="'100'"
									:modelValue="yearCountChat.department"
									@update:modelValue="(m) => yearCount(m, 'department')"
								></SelectTool>
							</div>
						</div>
						<div class="echart-box">
							<countChart ref="countChartRef"></countChart>
						</div>
					</div>
				</div>
				<!-- 中间 -->
				<div class="dataScreen-ct">
					<div class="ct-top">
						<!-- <div class="top-select-box">
							<SelectTool
								:optionsArr="centerTopSelect"
								:getWidth="'100'"
								@update:modelValue="centerTopData"
							></SelectTool>
						</div> -->
						<div class="center-top-data">
							<div v-for="item in centerArr" class="line-item">
								<div class="lf-icon">
									<img
										src="@/assets/screenImg/projectImg/center/pic1.png"
										alt=""
									/>
								</div>
								<div class="ct-desc">
									<div class="img">
										<img :src="item.title" alt="" />
										<div v-show="item.sign">
											<img :src="getSign(item.sign)" alt="" />
											<span
												:style="{
													color: item.sign === 'up' ? '#10FF0E' : '#F50000',
												}"
											>
												{{ item.rate }}%
											</span>
										</div>
									</div>
									<div class="text">
										<span class="numColor">{{ item.value }}</span>
										<span class="num-unit m-l10">
											<img :src="getPic(item.sign)" alt="" />
										</span>
									</div>
								</div>
								<div class="rg-option">
									<el-button
										size="small"
										link
										@click="handleDetail(scope.$index, scope.row)"
									>
										查看详情
									</el-button>
								</div>
							</div>
						</div>
					</div>
					<div class="ct-center">
						<div class="ct-left">
							<ItemTitle
								:itemTitleImg="postItemTitleImgObj['业态预算执行情况']"
								:mRight="'.0521rem'"
							>
								<template #rightCnBox>
									<div style="display: flex; margin-left: 0.0521rem">
										<SelectTool
											:optionsArr="selectArr"
											:getWidth="'80'"
											:modelValue="budgetContidion.direction"
											@update:modelValue="
												(val) => selectedBudget(val, 'direction')
											"
										></SelectTool>
										<SelectTool
											:optionsArr="quarterArr"
											:getWidth="'100'"
											:modelValue="budgetContidion.quarter"
											@update:modelValue="
												(val) => selectedBudget(val, 'quarter')
											"
											style="margin-left: 0.0521rem"
										></SelectTool>
									</div>
								</template>
							</ItemTitle>
							<div class="ct-lf-cn">
								<scroll-board
									:config="configCenter"
									:style="{ width: '100%', height: tableHeight + 'px' }"
									@click="showInfo"
								/>
								<!-- <el-table
									:data="tableCenter"
									style="width: 100%"
									class="table-box"
									header-row-class-name="table-head"
									row-class-name="table-row"
									:max-height="tableHeight"
								>
									<el-table-column prop="department" label="部门">
									</el-table-column>
									<el-table-column prop="practical" label="实际值">
										<template #default="scope">
											<span
												@click="showInfo(scope.row)"
												style="cursor: pointer"
											>
												{{ changeNumToWan(scope.row.practical || 0) + " 万元" }}
											</span>
										</template>
									</el-table-column>
									<el-table-column prop="achiev_rate" label="预算达成率">
										<template #default="scope">
											<div class="rate">
												<span>
													{{ Math.round(scope.row.achiev_rate * 100) + "%" }}
												</span>
											</div>
										</template>
									</el-table-column>
									<template #empty>
										<div
											style="
												line-height: 60px;
												color: var(--el-text-color-secondary);
												text-align: center;
											"
										>
											暂无数据
										</div>
									</template>
								</el-table> -->
							</div>
						</div>
						<div class="ct-right">
							<pieChart ref="pieChartRef"></pieChart>
						</div>
					</div>
					<div class="ct-bottom">
						<div style="width: 50%">
							<ItemTitle :itemTitleImg="postItemTitleImgObj['财务现金流']">
							</ItemTitle>
						</div>
						<div class="ct-bt-cn">
							<cashChart ref="cashChartRef"></cashChart>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<div class="dataScreen-rg">
					<!-- 经营预算 -->
					<div class="rg-top">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['经营预算']">
						</ItemTitle>
						<div class="rg-top-cn">
							<div class="pic">
								<div>
									<span>年度净资产收益率</span>
									<div>
										<span>{{ syfz.net_assets_income_rate }}</span>
										<span>%</span>
									</div>
								</div>
								<div>
									<span>年度净产负债率</span>
									<div>
										<span>{{ syfz.ratio_liabilitie }}</span>
										<span>%</span>
									</div>
								</div>
							</div>
							<div class="row-line one">
								<div class="m-l30">
									<SelectTool
										:optionsArr="dimensionArr"
										:getWidth="'90'"
										modelValue="年度"
										@update:modelValue="(t) => changeRate(t, 'income')"
									></SelectTool>
								</div>
								<div class="m-l30">
									<span class="income">收入达成率：</span>
									<div>
										<span class="income">
											{{ success_rate.income.income_rate }}
										</span>
										<span>%</span>
									</div>
								</div>
							</div>
							<div class="row-line two">
								<div class="m-l30">
									<SelectTool
										:optionsArr="dimensionArr"
										:getWidth="'90'"
										modelValue="年度"
										@update:modelValue="(t) => changeRate(t, 'expend')"
									></SelectTool>
								</div>
								<div class="m-l30">
									<span class="pay">支出达成率：</span>
									<div>
										<span class="pay">
											{{ success_rate.expend.expend_rate }}
										</span>
										<span>%</span>
									</div>
								</div>
							</div>
							<div class="row-line three">
								<div class="m-l30">
									<SelectTool
										:optionsArr="dimensionArr"
										:getWidth="'90'"
										modelValue="年度"
										@update:modelValue="(t) => changeRate(t, 'profit')"
									></SelectTool>
								</div>
								<div class="m-l30">
									<span class="profit">利润达成率：</span>
									<div>
										<span class="profit">
											{{ success_rate.profit.profit_rate }}
										</span>
										<span>%</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 各公司回款率 -->
					<div class="rg-center">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['各公司回款率']">
							<template #rightCnBox>
								<SelectTool
									:optionsArr="dimensionArr.slice(0, dimensionArr.length - 1)"
									:getWidth="'90'"
									modelValue="年度"
									@update:modelValue="returnMoney"
								></SelectTool>
							</template>
						</ItemTitle>
						<div class="rg-ct-cn">
							<scroll-board
								:config="configRight"
								:style="{ width: '100%', height: rightHeight + 'px' }"
							/>
							<!-- <el-table
								:data="moneyRate.rate"
								style="width: 100%"
								class="table-box"
								header-row-class-name="table-head"
								row-class-name="table-row"
								:max-height="rightHeight"
							>
								<el-table-column type="index" label="序号" width="50" />
								<el-table-column prop="department" label="部门名称" />
								<el-table-column prop="return_rate" label="回款率">
									<template #default="scope">
										<div class="rate">
											<span>
												{{ Math.round(scope.row.return_rate * 100) + "%" }}
											</span>
										</div>
									</template>
								</el-table-column>
								<template #empty>
									<div
										style="
											line-height: 60px;
											color: var(--el-text-color-secondary);
											text-align: center;
										"
									>
										暂无数据
									</div>
								</template>
							</el-table> -->
						</div>
					</div>
					<div class="rg-bottom">
						<ItemTitle :itemTitleImg="postItemTitleImgObj['年度统计']">
						</ItemTitle>
						<div class="rg-bt-cn">
							<div class="select-box">
								<div>
									<SelectTool
										:optionsArr="collectionArr"
										:getWidth="'100'"
										:modelValue="monthContidion.direction"
										@update:modelValue="(v) => fetchMonthRate(v, 'direction')"
									></SelectTool>
								</div>
								<div>
									<SelectTool
										:optionsArr="departmentArr2"
										:getWidth="'100'"
										:modelValue="monthContidion.department"
										@update:modelValue="(v) => fetchMonthRate(v, 'department')"
									></SelectTool>
								</div>
							</div>
							<returnChart ref="returnChartRef"></returnChart>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog
			v-model="dialogVisible"
			title="预算执行详情"
			width="35%"
			align-center
			:modal="true"
			class="info-dialog"
			@close="closeDialog"
		>
			<div class="dialog-content">
				<scroll-board
					:config="dialogConfig"
					:style="{ width: '100%', height: '300px' }"
				></scroll-board>
				<!-- <el-table
					:data="dialogData"
					style="width: 100%"
					class="table-box"
					header-row-class-name="table-head"
					row-class-name="table-row"
					:max-height="300"
				>
					<el-table-column prop="project" label="项目名称" />
					<el-table-column prop="direction" label="方向" />
					<el-table-column prop="budget" label="计划数">
						<template #default="scope">
							<span>{{ changeNumToWan(scope.row.budget || 0) }}万元</span>
						</template>
					</el-table-column>
					<el-table-column prop="practical" label="实际数">
						<template #default="scope">
							<span>{{ changeNumToWan(scope.row.practical) }}万元</span>
						</template>
					</el-table-column>
					<template #empty>
						<div
							style="
								line-height: 60px;
								color: var(--el-text-color-secondary);
								text-align: center;
							"
						>
							暂无数据
						</div>
					</template>
				</el-table> -->
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false" size="small">
						确 认
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from "vue";
import { useRouter } from "vue-router";
import ScreenHeader from "../components/ScreenHeader";
import { getScale } from "../utils/handelScreen";
import ItemTitle from "./components/ItemTitle";
import { ElTable, ElDialog } from "element-plus";
import { ScrollBoard } from "@kjgl77/datav-vue3";
import SelectTool from "../components/SlecetTool";
import countChart from "./components/countChart.vue";
import pieChart from "./components/pieChart.vue";
import cashChart from "./components/cashChart.vue";
import returnChart from "./components/returnChart.vue";
import { changeNumToWan } from "../utils/handelScreen";
import {
	zjys_info,
	jyys_month_dp,
	zjys_finish_year,
	zjys_finish_dep,
	zjys_finish_dep_detail,
	jyys_hkl,
	jyys_dcl,
	zjys_info_now,
	zjys_finish_month_dp,
	jyys_sf,
} from "./service";

// 菜单项
const postMenuArr = ref([
	{ name: "资金预算", path: "/dashboard/fundbudget" },
	{ name: "经营预算", path: "/dashboard/operate" },
]);
const router = useRouter();
const clickMenu = (i) => {
	if (i) router.push(i);
	// window.location.href = i;
};

const postTitleImg = require("@/assets/screenImg/financeImg/title.png");
const postItemTitleImgObj = reactive({
	资金预算: require("@/assets/screenImg/financeImg/title1.png"),
	业态预算执行情况: require("@/assets/screenImg/financeImg/title2.png"),
	财务现金流: require("@/assets/screenImg/financeImg/title3.png"),
	经营预算: require("@/assets/screenImg/financeImg/title4.png"),
	各公司回款率: require("@/assets/screenImg/financeImg/title5.png"),
	年度统计: require("@/assets/screenImg/financeImg/left/title5.png"),
});
const currentYear = new Date().getFullYear();

const countChartRef = ref();
const pieChartRef = ref();
const cashChartRef = ref();
const returnChartRef = ref();
const screenChartObj = reactive({
	chart1: null,
	chart2: null,
	chart3: null,
	chart4: null,
});

//左边
let leftArr1 = ref([
	{
		name: require("@/assets/screenImg/financeImg/left/title1.png"),
		value: 0,
		unit: require("@/assets/screenImg/financeImg/left/unit.png"),
	},
	{
		name: require("@/assets/screenImg/financeImg/left/title2.png"),
		value: 0,
		unit: require("@/assets/screenImg/financeImg/left/unit.png"),
	},
]);
let leftArr2 = ref([
	{
		name: require("@/assets/screenImg/financeImg/left/title3.png"),
		value: 0,
		unit: require("@/assets/screenImg/financeImg/left/unit.png"),
	},
	{
		name: require("@/assets/screenImg/financeImg/left/title4.png"),
		value: 0,
		outflow: 0,
		influx: 0,
		ex_balance: 0,
		unit: require("@/assets/screenImg/financeImg/left/unit.png"),
	},
]);

const yearCountChat = ref({
	year: currentYear,
	direction: "流入",
	department: "全部",
	chat: [],
});
let selectArr = [
	{
		label: "流入",
		value: "流入",
	},
	{
		label: "流出",
		value: "流出",
	},
];
let quarterArr = [
	{
		label: "第一季度",
		value: 1,
	},
	{
		label: "第二季度",
		value: 2,
	},
	{
		label: "第三季度",
		value: 3,
	},
	{
		label: "第四季度",
		value: 4,
	},
];
const yearCount = (val, target) => {
	yearCountChat.value[target] = val;
	const { year, direction, department } = yearCountChat.value;
	countChartRef.value?.initCountChart({ year, direction, department });
};

const initAllCharts = () => {
	const { year, direction, department } = yearCountChat.value;
	screenChartObj.chart1 = countChartRef.value?.initCountChart({
		year,
		direction,
		department,
	});
	fetchStatic();
	fetchImplementation();
	screenChartObj.chart3 = cashChartRef.value?.initCashChart();
	fetchMonthRate();
};

// 中间
// 中间顶部下拉框
let centerTopSelect = ref([
	{
		label: "收入",
		value: 1,
	},
	{
		label: "成本",
		value: 2,
	},
	{
		label: "利润",
		value: 3,
	},
]);
let centerArr = ref([
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/financeImg/center/title1.png"),
		value: 0,
		sign: "up",
		rate: 0,
	},
	{
		src: require("@/assets/screenImg/projectImg/center/pic1.png"),
		title: require("@/assets/screenImg/financeImg/center/title2.png"),
		value: 0,
	},
]);
let handleDetail = (index, row) => {};
let getSign = (i) => {
	let img = ref({
		upImg: require("@/assets/screenImg/commonImg/up.png"),
		downImg: require("@/assets/screenImg/commonImg/down.png"),
	});
	if (i === "up") {
		return img.value.upImg;
	} else if (i === "down") {
		return img.value.downImg;
	}
};
let getPic = (i) => {
	let img = ref({
		price: require("@/assets/screenImg/financeImg/left/unit.png"),
		rate: require("@/assets/screenImg/financeImg/left/rate.png"),
	});
	if (i) {
		return img.value.price;
	} else {
		return img.value.rate;
	}
};

let tableHeight = ref();
let tableCenter = ref([]);
let configCenter = ref({
	header: [
		`<span style='color:#56caff;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>部门</span>`,
		`<span style='color:#56caff;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>实际值</span>`,
		`<span style='color:#56caff;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>预算达成率</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: ["center", "center", "center"],
});

let budgetContidion = ref({
	year: currentYear,
	direction: "流出",
	quarter: 1,
});

const selectedBudget = (val, type) => {
	if (type === "direction") {
		budgetContidion.value.direction = val;
	}
	if (type === "quarter") {
		budgetContidion.value.quarter = val;
	}
	fetchStatic();
	fetchImplementation();
};
const fetchStatic = () => {
	const { year, direction } = budgetContidion.value;
	zjys_finish_year({ year, direction }).then((resp) => {
		const {
			achiev_rate = "0",
			practical = 0,
			practical_basis = 0,
		} = resp || {};
		centerArr.value[0].value = changeNumToWan(practical);
		centerArr.value[0].rate = Math.round(practical_basis * 100);
		centerArr.value[0].sign = +practical_basis < 0 ? "down" : "up";
		centerArr.value[1].value = Math.round(achiev_rate * 100);
	});
};
const fetchImplementation = () => {
	const { year, direction, quarter } = budgetContidion.value;
	zjys_finish_dep({ year, direction, quarter }).then((resp = []) => {
		tableCenter.value.splice(0);
		tableCenter.value.push(...resp);
		if (resp.length) {
			configCenter.value.data = resp.map((item) => {
				return [
					`<span style="color:#d3e3ff;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;font-size: 15px;">${item.department}</span>`,
					`<span style="color:#d3e3ff;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;font-size: 15px;cursor:pointer;">
            ${changeNumToWan(item.practical || 0)}万元</span>`,
					`<span style="color:#92ffff;font-family: AlibabaPuHuiTi-Regular, AlibabaPuHuiTi;font-size: 15px;text-shadow: 0px 2px 4px rgba(54, 227, 227, 0.53);">
            ${Math.round((item.achiev_rate || 0) * 100)}%</span>`,
				];
			});
		}
		pieChartRef.value?.initPieChart(tableCenter.value);
	});
};

let dialogVisible = ref(false);
let dialogData = ref([]);
let dialogConfig = ref({
	header: [
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>项目名称</span>`,
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>方向</span>`,
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>计划数</span>`,
		`<span style='color:#d4edfd;font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;'>实际数</span>`,
	],
	headerBGC: "rgba(49, 127, 241, 0.2)",
	data: [],
	oddRowBGC: "rgba(23, 137, 207, 0.5)",
	evenRowBGC: "rgba(23, 137, 207, 0.5)",
	align: ["center", "center", "center", "center"],
});
let showInfo = (content) => {
	if (content.columnIndex === 1) {
		let span = document.createElement("span");
		span.innerHTML = content.row[0];
		let el = span.getElementsByTagName("span");
		let department = el[0].innerText;
		const { direction, quarter } = budgetContidion.value;
		const p = {
			year: "" + currentYear,
			quarter,
			direction,
			department,
		};
		zjys_finish_dep_detail(p).then((resp) => {
			dialogData.value = resp;
			dialogConfig.value.data = resp.map((item) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216, 240, 255, 0.8);">${item.project}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216, 240, 255, 0.8);">${item.direction}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216, 240, 255, 0.8);">
            ${changeNumToWan(item.budget || 0)}万元</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color: rgba(216, 240, 255, 0.8);">
            ${changeNumToWan(item.practical || 0)}万元</span>`,
				];
			});
			dialogVisible.value = true;
		});
	}
};
let closeDialog = () => {
	dialogData.value = [];
};

// 右边
let rightHeight = ref();
let syfz = ref({
	net_assets_income_rate: "0%",
	ratio_liabilitie: "0%",
});
let success_rate = ref({
	income: {
		income_rate: "0",
		expend_rate: "0",
		profit_rate: "0",
		select: null,
	},
	expend: {
		income_rate: "0",
		expend_rate: "0",
		profit_rate: "0",
		select: null,
	},
	profit: {
		income_rate: "0",
		expend_rate: "0",
		profit_rate: "0",
		select: null,
	},
});
const changeRate = (selected, key) => {
	jyys_dcl({ year: currentYear, time_dim: selected }).then((resp) => {
		const {
			expend_rate = "0",
			income_rate = "0",
			profit_rate = "0",
		} = resp || {};
		success_rate.value[key].expend_rate = Math.round(expend_rate * 100);
		success_rate.value[key].income_rate = Math.round(income_rate * 100);
		success_rate.value[key].profit_rate = Math.round(profit_rate * 100);
	});
};

let configRight = ref({
	header: [
		`<span style='color:#d4edfd;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;'>序号</span>`,
		`<span style='color:#d4edfd;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;'>部门名称</span>`,
		`<span style='color:#d4edfd;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;'>回款率</span>`,
	],
	headerBGC: "rgba(21, 77, 160, 0.2)",
	data: [],
	oddRowBGC: "transparent",
	evenRowBGC: "transparent",
	align: ["center", "center", "center"],
});
let moneyRate = ref({
	rate: [],
});
const returnMoney = (season) => {
	jyys_hkl({
		year: currentYear,
		time_dim: season,
	}).then((resp) => {
		moneyRate.value.rate = resp || [];
		if (resp.length) {
			configRight.value.data = resp.map((item, index) => {
				return [
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color:rgba(216, 240, 255, 0.8)">
            ${index + 1}</span>`,
					`<span style="font-size: 12px;font-family: PingFangSC-Regular, PingFang SC;color:rgba(216, 240, 255, 0.8)">${item.department}</span>`,
					`<span style="font-size: 12px;font-family: SourceHanSansCN-Medium, SourceHanSansCN;font-weight: 500;color: #36e3e3;text-decoration: underline;text-underline-offset: 5px;">
            ${Math.round((item.return_rate || 0) * 100) + "%"}
            </span>`,
				];
			});
		}
	});
};

let monthContidion = ref({
	year: currentYear,
	direction: "收入",
	department: "全部",
});

const fetchMonthRate = (val, key) => {
	if (val && key) monthContidion.value[val] = key;
	screenChartObj.chart4 = returnChartRef.value?.initReturnChart(
		monthContidion.value
	);
};

let calcHeight = (className) => {
	let el = document.getElementsByClassName(className);
	if (el) {
		return el[0].clientHeight;
	} else {
		return 0;
	}
};

//部门1
const departmentArr = reactive([]);
const departmentArr2 = reactive([]);
//经营预算维度
const dimensionArr = reactive([
	{ label: "年度", value: "年度" },
	{ label: "季度", value: "季度" },
	{ label: "月度", value: "月度" },
]);
const yearArr = reactive([
	{ label: "2023", value: "2023" },
	{ label: "2022", value: "2022" },
]);
//回款率
const collectionArr = reactive([
	{ label: "收入", value: "收入" },
	{ label: "支出", value: "支出" },
	{ label: "利润", value: "利润" },
]);

const dataScreenRef = ref(null);
const screenResize = () => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
	}
};

onMounted(() => {
	if (dataScreenRef.value) {
		dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
		dataScreenRef.value.style.width = `1920px`;
		dataScreenRef.value.style.height = `1080px`;
		window.addEventListener("resize", screenResize);
		nextTick(() => {
			initAllCharts();
			tableHeight.value = calcHeight("ct-lf-cn");
			rightHeight.value = calcHeight("rg-ct-cn");
		});
	}

	//获取部门1
	zjys_finish_month_dp().then((resp = []) => {
		const dept = resp.map(({ department }) => ({
			label: department,
			value: department,
		}));
		departmentArr.push(...dept);
	});
	//获取部门2
	jyys_month_dp().then((resp = []) => {
		const dept = resp.map(({ department }) => ({
			label: department,
			value: department,
		}));
		departmentArr2.push(...dept);
	});

	//左上-资金预算
	zjys_info({ year: currentYear })
		.then((resp) => {
			const { account_balance = 0, loan_balance = 0 } = resp || {};
			leftArr1.value[0].value = account_balance;
			leftArr2.value[0].value = loan_balance;
		})
		.catch((e) => {});
	zjys_info_now({ year: currentYear })
		.then((resp) => {
			const {
				account_balance = 0,
				outflow = 0,
				influx = 0,
				ex_balance = 0,
			} = resp || {};
			leftArr1.value[1].value = account_balance;
			leftArr1.value[1].outflow = outflow;
			leftArr1.value[1].influx = influx;
			leftArr2.value[1].value = ex_balance;
		})
		.catch((e) => {});

	//右上
	jyys_sf({ year: currentYear })
		.then((resp) => {
			const { net_assets_income_rate = 0, ratio_liabilitie = 0 } = resp || {};
			syfz.value.net_assets_income_rate = Math.round(
				100 * net_assets_income_rate
			);
			syfz.value.ratio_liabilitie = Math.round(100 * ratio_liabilitie);
		})
		.catch((e) => {});
	changeRate("年度", "expend");
	changeRate("年度", "income");
	changeRate("年度", "profit");
	returnMoney("年度");
});
onBeforeUnmount(() => {
	windowNaNpxoveEventListener("resize", screenResize);
	// Object.values(screenChartObj).forEach((val) => val?.dispose());
});
</script>
<style lang="scss" scoped>
@import "./financeStyle.scss";
</style>
